<template>
	<view class="zone">
		<Header title="限时推广活动"></Header>
		<view class="main">

			<view class="daojis">
				<image class="naoz" src="http://image.qxgm.site/tdz/img/active/naz.png" mode="widthFix"></image>
				<view class="tiem">
					倒计时:<u-count-down :autoplay="true" separator-size='28' :font-size='28' separator-color='#fff'
						:show-days='true' :show-hours='true' :show-minutes='true' :show-seconds='true' separator='zh'
						color='#FFF000' bg-color='none' :timestamp="stimes"></u-count-down>

				</view>
			</view>
			<image src="http://image.qxgm.site/tdz/img/home/mg-03.gif" mode="widthFix" class="lw8"
				@click="$p.navto('/pages/index/friendgirl')"></image>
			<view class="wdjl">
				<image class="wjl" src="http://image.qxgm.site/tdz/img/active/3.png" mode="widthFix"></image>
				<view class="opa">
					我的奖励 <text class="yellow">红包x{{money[stat]}}</text>
				</view>
			</view>
			<view class="tabs">
				<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
					@click="tabchange(item.id)">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="box">
				<view class="anpi">
					活动期间邀请有效好友达到目标数即可获得奖励
				</view>
				<view class="saba">
					<text class="sg1">邀请人数</text>
					<text class="sg2">奖励</text>
					<text class="sg3">完成好友</text>
				</view>

				<scroll-view scroll-y class="scrolllist" @scrolltolower="scrolltolower">

					<view class="list">
						<view class="item" v-for="(item,index) in listdata[stat]" :key="index">
							<view class="flex">
								<view class="header">
									<image src="http://image.qxgm.site/tdz/img/active/5.png" mode="widthFix" />
								</view>
								<view class="lv">
									<text>{{item.number}}人</text>
								</view>
							</view>
							<view class="worf">
								<image class="hongba" src="http://image.qxgm.site/tdz/img/active/3.png" mode="widthFix">
								</image>
								<text class="uana">x{{item.reward?item.reward:item.money}}</text>
							</view>
							<view class="center">
								<text
									v-if="item.friends_count>=0">{{item.friends_count > item.number ? item.number : item.friends_count}}/{{item.number}}</text>
								<text
									v-else>{{item.user_count > item.number ? item.number : item.user_count}}/{{item.number}}</text>
								<view v-if="stat==1"
									:class="item.state==0?'linkbtn3':item.state==1?'linkbtn2':'linkbtn'"
									@click="linkwold(item,index)">
									{{item.state == 0? '未完成' : item.state == 1? '领取' : '已领取'}}
								</view>
								<view v-else :class="item.state==0?'linkbtn3':item.state==1?'linkbtn2':'linkbtn'"
									@click="linkwold2(item,index)">
									{{item.state == 0? '未完成' : item.state == 1? '领取' : '已领取'}}
								</view>

							</view>
						</view>
					</view>

					<view class="empty" v-if="listdata[stat].length==0">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						<text class="hui">
							没有数据哦~
						</text>
					</view>
					<u-loadmore v-else :status="status" color="#666" :icon-type="iconType" :load-text="loadText" />

				</scroll-view>

				<view class="dsianqwo" @click="$p.navto('/pages/index/invite')">
					点我邀请好友
				</view>

			</view>
		</view>
		<!-- 恭喜获得 -->
		<u-mask :show="obtain">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/active/3.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									零钱x{{goods.reward?goods.reward:goods.money}}
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '直推好友',
						isrequest: false,
					},
					{
						id: 2,
						name: '间推好友',
						isrequest: false,
					},
					{
						id: 3,
						name: '团队好友',
						isrequest: false,
					},
				],
				stat: 1,
				datalist: [], //用来保存数据
				page: [1, 1, 1, 1],
				max_page: [1, 1, 1, 1],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				listdata: {
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
				},
				stimes: '',
				goods: {},
				obtain: false,
				money: [0, 0, 0, 0]
			}
		},
		onShow() {

		},
		onLoad() {
			this.taskfriends();
		},
		methods: {
			// 切换
			tabchange(id) {
				this.stat = id;
				if (!this.tablist[id - 1].isrequest) {
					this.taskfriends()
				} else if (!this.tablist[id - 1].isrequest) {
					this.taskfriends()
				} else if (!this.tablist[id - 1].isrequest) {
					this.taskfriends()
				}
				if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
						this.stat]) this.status = 'nomore';
				else this.status = 'loading';
			},
			scrolltolower() {
				// if (this.page >= this.max_page) {
				// 	this.status = 'nomore'
				// 	return;
				// }
				if (this.page[this.stat] >= this.max_page[this.stat]) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				// this.page = ++this.page;
				this.page[this.stat] = ++this.page[this.stat];
				this.taskfriends();
				// setTimeout(() => {
				// 	if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				// 	else this.status = 'loading';
				// }, 500)
				setTimeout(() => {
					if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
							this.stat]) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},
			// 请求排行榜列表
			async taskfriends() {
				if (this.stat == 1) {
					let res = await this.$http.index.taskfriends({
						page: this.page[this.stat]
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.list]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
						this.stimes = res.data.left_time
						this.money[this.stat] = res.data.money
					}
				} else if (this.stat == 2) {
					let res = await this.$http.index.jiantuihaoyou({
						page: this.page[this.stat],
						type: 1
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.list]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
						this.money[this.stat] = res.data.money
					}
				} else if (this.stat == 3) {
					let res = await this.$http.index.jiantuihaoyou({
						page: this.page[this.stat],
						type: 2
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.list]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
						this.money[this.stat] = res.data.money
					}
				}
				// let res = await this.$http.index.taskfriends({
				// 	page: this.page
				// })
				// if (res.code == 1) {
				// 	this.max_page = res.data.last_page
				// 	this.datalist = [...this.datalist, ...res.data.list]
				// 	if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				// 	this.stimes = res.data.left_time
				// 	this.money = res.data.money
				// }

			},
			async linkwold(item, index) {
				if (item.state == 0) {
					this.$u.toast('您还未完成')
				} else if (item.state == 1) {
					let res = await this.$http.index.guidetaskRece({
						user_task_id: item.user_task_id
					})
					if (res.code == 1) {
						// this.datalist = []
						this.listdata[this.stat] = []
						// this.page = 1
						this.page[this.stat] = 1
						this.taskfriends();
						this.goods = item
						this.obtain = true
					} else {
						this.$u.toast(res.msg)
					}
				}
			},
			async linkwold2(item, index) {
				if (item.state == 0) {
					this.$u.toast('您还未完成')
				} else if (item.state == 1) {
					let res = await this.$http.index.trceivetaskteam({
						task_id: item.id
					})
					if (res.code == 1) {
						// this.datalist = []
						this.listdata[this.stat] = []
						// this.page = 1
						this.page[this.stat] = 1
						this.taskfriends();
						this.goods = item
						this.obtain = true
					} else {
						this.$u.toast(res.msg)
					}
				}
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background-image: url(http://image.qxgm.site/tdz/img/active/bg.png), url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-repeat: no-repeat, repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/active/sbg.png) no-repeat;
		background-size: 100% 100%;
		padding: 14px 6px 6px;
		box-sizing: border-box;
	}

	.scrolllist {
		height: calc(100vh - 335px);
		overflow-y: scroll;
	}

	.daojis {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/active/2.png) no-repeat;
		background-size: 100% 100%;
		padding: 7px 0;
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			width: 64px;
			padding: 9px 5px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.saba {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/active/4.png) no-repeat;
		background-size: 100% 100%;
		font-size: 14px;
		font-weight: normal;
		color: #CCCCCC;
		line-height: 14px;
		padding: 11px 12% 11px 8%;
		margin-bottom: 6px;
	}

	.tiem {
		font-size: 15px;
		font-weight: normal;
		color: #FFFFFF;
		text-shadow: 0 1px 1px #000;
	}

	.anpi {
		font-size: 12px;
		font-weight: normal;
		color: #333333;
		line-height: 12px;
		text-align: center;
		margin-bottom: 7px;
	}

	.naoz {
		width: 20px;
		margin-right: 7px;
	}

	.wdjl {
		width: 54%;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/active/1.png) no-repeat;
		background-size: 100% 100%;
		padding: 7px 0 7px 8px;
		margin-left: 10%;
		margin-top: 4vh;
		margin-bottom: 9vh;
	}

	.opa {
		font-size: 13px;
		font-weight: normal;
		color: #FFFFFF;
		text-shadow: 0 1px 1px #000;
		margin-left: 11px;
	}

	.yellow {
		color: #FFF000;
		margin-left: 6px;
	}

	.wjl {
		width: 24px;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 9px 12px;
		box-sizing: border-box;
	}

	.flex {
		display: flex;
		align-content: center;

		.lv {
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 16px;
				font-weight: 500;
			}

		}
	}

	.header {
		width: 55px;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-17.png) no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 2px 7px;

		image {
			width: 100%;
		}
	}

	.worf {
		display: flex;
		align-items: center;
	}

	.center {
		display: flex;
		align-items: center;

		text {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 15px;
			margin-right: 5%;
		}
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 10px;
		background: #000000;

		.tab {
			width: 30%;
			text-align: center;
			font-weight: normal;
			font-size: 14px;
			color: #996633;
			line-height: 26px;
			background: url(http://image.qxgm.site/tdz/img/tk/2.png) no-repeat;
			background-size: 100% 100%;
		}

		.act {
			color: #FFFFCC;
			background: url(http://image.qxgm.site/tdz/img/tk/3.png) no-repeat;
			background-size: 100% 100%;
		}

	}

	.linkbtn {
		width: 80px;
		height: 36px;
		font-size: 14px;
		font-weight: normal;
		line-height: 36px;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/active/6.png) no-repeat;
		background-size: 100% 100%;
	}

	.linkbtn2 {
		width: 80px;
		height: 36px;
		font-size: 14px;
		font-weight: normal;
		line-height: 36px;
		color: #fdf2c5;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/active/7.png) no-repeat;
		background-size: 100% 100%;
	}

	.linkbtn3 {
		width: 80px;
		height: 36px;
		font-size: 14px;
		font-weight: normal;
		line-height: 36px;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 1px #006599;
		background: url(http://image.qxgm.site/tdz/img/active/8.png) no-repeat;
		background-size: 100% 100%;
	}

	.dsianqwo {
		position: fixed;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		width: 156px;
		height: 42px;
		font-size: 18px;
		font-weight: normal;
		line-height: 42px;
		color: #fdf2c5;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.jihuop {
		padding: 0 9%;
	}

	.spart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;

		text {
			width: 22%;
		}
	}

	.hongba {
		width: 22px;
	}

	.slink {
		width: 78%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		padding: 0 6px 0 19px;
		height: 40px;

		input {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 24px;
		}

		.scopy {
			width: 49px;
			height: 28px;
			display: block;
			font-size: 12px;
			text-align: center;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 28px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.lw8 {
		position: absolute;
		right: 20px;
		top: 8%;
		width: 16%;
	}
</style>